<template>
  <!-- v-if="animationEnd"  -->
  <div class="hr" ref="hrRef">
    <div class="e-text">
      <div v-if="stats.hr.mobileDays" class="mb-56">
        <p>今年，</p>
        <p>你移动打卡 <span class="strong-word">{{ stats.hr.mobileDays }}</span>天</p>
        <p class="strong-word">{{ stats.hr.mostPlace }}</p>
        <p>一个特别的地方，你的足迹留下<span class="strong-word">{{ stats.hr.mostPlaceNum }}</span>次</p>
      </div>
      <div v-if="stats.hr.lateNight" class="mb-56">
        <p>有<span class="strong-word">{{ stats.hr.lateNight }}</span>个深夜，</p>
        <p>你还在办公桌前工作</p>
        <p>黑夜无边，梦想有光，</p>
        <p>你的努力，将被世界看见</p>
      </div>
    </div>
    <img class="h-bg-run" :id="props.stats.sex === '女' ? 't-female' : 't-male'"
      :src="props.stats.sex === '女' ? female : male" alt="" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { slideUp, slideDown } from "../../../../utils/slide";
import female from "@/assets/img/hr/h-female.jpg"
import male from "@/assets/img/hr/h-male.jpg"

const emit = defineEmits(["slideUp", "slideDown"]);
const props = defineProps<{
  stats: any;
}>();
const hrRef = ref<any>(null);

watch(hrRef, () => {
  slideUp(hrRef.value, () => {
    console.log("event");
    emit("slideUp");
  });
  slideDown(hrRef.value, () => {
    emit("slideDown");
  });
});
</script>

<script lang="ts">

export default {
  name: "HrPage",
};
</script>

<style lang="scss" scoped>
.hr {
  @include full-screen-relative;
}

.e-text {
  @include animation-fade-in;
  position: absolute;
  top: 150px;
  left: 64px;
  z-index: 999;
  padding-right: 64px;
  color: $text-blue1;
  font-family: ChangAnunitype;

  p {
    line-height: 48px;
  }
}

img {
  position: absolute;
}

.e-bg {
  @include animation-fade-in;
  bottom: 0;
  left: 228px;
  height: auto;
  width: 100vw;
}

.h-bg-run {
  @include animation-scale;
  position: fixed;
  z-index: 50;
  bottom: 0;

  width: 100%;
  height: auto;
}

#t-female {
  right: 68px;

}

#t-male {
  left: 50px;
}
</style>
